<template>
    <h2>vue条件语句</h2>

    <div>
        <!-- <h4 v-if="age==20">现在20岁啦</h4>
        <h4 v-else-if="age==23">现在我23岁啦</h4>
        <h4 v-else>你说错啦</h4> -->
        
        <!-- v-if 当初始条件不满足时，内容不会被渲染 v-show当初始条件不满足时，内容会继续被渲染，额外会在标签中加入style样式通过display:none;决定数据为不显示状态-->
        <!-- 应用场景：1.如果说当前的属性需要频繁进行数据切换，使用v-show 因为他只是在负责属性样式的切换，而v-if则是需要进行元素渲染 -->
        <p v-if="age==23">我现在23岁啦</p>
        <p v-show="age==23">我现在23岁啦</p>
    </div>

</template>
<script setup lang="ts">
const age=20;
</script>